<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="description" content="新网页设计师。web标准的教程站点，推动web标准在中国的应用" />
<meta name="keywords" content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" />
<title>填写资料-用户注册</title>
<link rel="icon" type="image/x-icon" href="http://static.test.com/images/common/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="http://static.test.com/images/common/favicon.ico" />
<link rel="stylesheet" type="text/css" href="http://static.test.com/style/v1/base.css" />
<style type="text/css">
.show-50 {-moz-opacity:0.50;filter:alpha(opacity=50);opacity:0.50;}
.transparent {zoom:1;filter:alpha(opacity=50);opacity:0.5;}

/* ======流程步骤条样式 START======== */
.ks-steps{
    overflow:hidden;
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    word-spacing: -0.43em;
}
.ks-steps li.ks-steps-item{
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    height:24px;line-height:24px;
	color:#404040;
    font-size:14px;
    font-weight:bold;
    text-align:center;
	background-color:#E4E4E4;
	margin:0px !important;
    position:relative;
    z-index:100;
}
/*-----步骤条子项宽度-----*/
.ks-steps.num3 li {width:33.3%;}
.ks-steps.num4 li {width:237px;}
.ks-steps.num5 li {width:20%;}
.ks-steps.num6 li {width:158px;}
/*-----颜色-----*/
/*橘色*/
.ks-steps.orange li.done{background-color:#FFE6BA;color:#FF6600 !important;}
.ks-steps.orange li.current{background-color:#FF6600;}
.ks-steps.orange .done .blo{border-left-color:#FFE6BA !important;}
.ks-steps.orange .current .blo{border-left-color:#FF6600 !important;}
/*蓝色*/
.ks-steps.blue li.done{background-color:#CAE6F1;color:#3784BC !important;}
.ks-steps.blue li.current{background-color:#3784BC;}
.ks-steps.blue .done .blo{border-left-color:#CAE6F1 !important;}
.ks-steps.blue .current .blo{border-left-color:#3784BC !important;}
/*绿色*/
.ks-steps.green li.done{background-color:#d0ed76;color:#7f9f1b !important;}
.ks-steps.green li.current{background-color:#7f9f1b;}
.ks-steps.green .done .blo{border-left-color:#d0ed76 !important;}
.ks-steps.green .current .blo{border-left-color:#7f9f1b !important;}
/*红色*/
.ks-steps.red li.done{background-color:#f5abab;color:#a32626 !important;}
.ks-steps.red li.current{background-color:#a32626;}
.ks-steps.red .done .blo{border-left-color:#f5abab !important;}
.ks-steps.red .current .blo{border-left-color:#a32626 !important;}
/*粉红色*/
.ks-steps.pink li.done{background-color:#f1afd6;color:#9c1866 !important;}
.ks-steps.pink li.current{background-color:#9c1866;}
.ks-steps.pink .done .blo{border-left-color:#f1afd6 !important;}
.ks-steps.pink .current .blo{border-left-color:#9c1866 !important;}
/*灰色*/
.ks-steps.gray li.done{background-color:#c4c4c4;color:#606060 !important;}
.ks-steps.gray li.current{background-color:#606060;}
.ks-steps.gray .done .blo{border-left-color:#c4c4c4 !important;}
.ks-steps.gray .current .blo{border-left-color:#606060 !important;}

/*第一项圆角*/
.ks-steps li.first{
    border-top-left-radius:3px 3px;
	border-bottom-left-radius:3px 3px;
	-moz-border-radius-topleft :3px 3px;
	-moz-border-radius-bottomleft : 3px 3px;  
}
/*最后一项圆角*/
.ks-steps li.last{
    border-top-right-radius:3px 3px;
	border-bottom-right-radius:3px 3px;
	-moz-border-radius-topright :3px 3px;
	-moz-border-radius-bottomright : 3px 3px;  
}
.ks-steps li.current{font-weight:normal;color:#FFFFFF !important;}
.ks-steps li.current .first {background-color:#FF6600;}

/*-----箭头样式-----*/
.ks-steps li .trigon{
	position:absolute;top:0px;right:-14px;z-index:200;
	width:14px;height:24px;overflow:hidden;
	padding:0px;background-color:transparent;
    z-index:200;
}
.ks-steps li .trigon span{width:0px; height:0px;line-height:0px !important;padding:0px;}
.ks-steps li .trigon .blo{
	position:absolute;left:0px;top:0px;
	border:12px solid; 
	border-color:transparent transparent transparent #E4E4E4;
	border-style:dashed dashed dashed solid;
}
.ks-steps li .trigon .bor{
	position:absolute;left:0px;top:-2px;
	border:14px solid; 
	border-color:transparent transparent transparent #FFF;
	border-style:dashed dashed dashed solid;	
}
/* ======流程步骤条样式 END======== */

.act_box{    color: #999999;line-height: 19px;word-wrap: break-word;}

.info_rate{position:relative;border:1px solid #D2D2D2;margin-top:3px;padding:1px;width:102px;height:7px;background:none repeat scroll 0 0 #FFFFFF;z-index:2;}
.info_rate span{background: none repeat scroll 0 0 #88DCFC;display:block;height:7px;overflow:hidden;}
.info_rate a{color:#666666;font-size:9px;line-height:1.231;position:absolute;text-align:center;top:-1px;width:100%;}
.info_rate a:hover{text-decoration:none;}

.setps{}
.setps ul{margin:0; padding:0;}
.setps ul li{color: #FFFFFF;float: left;font-size: 14px;line-height: 26px;text-align: center;}
.first,.second,.third{background:url("map.png") 0 0 no-repeat;}
.first{background-position:0 -99px;background-repeat:repeat-x;height:26px;width:182px;}
.second{background-position:0 -131px;background-repeat:repeat-x;height:26px;width:146px;position:relative;left:-7px;_left:0px;}
.third{background-position:0 -166px;background-repeat:repeat-x;height:26px;width:177px;position:relative;left:-15px;_left:0px;}
.first.actived{background-position:0 0;background-repeat:repeat-x;height:26px;width:182px;}
.second.actived{background-position:0 -31px;background-repeat:repeat-x;height:26px;width:146px;}
.third.actived{background-position:0 -65px;background-repeat:repeat-x;height:26px;width:177px;}

.bottom_tool_bar {right:1px;bottom:0px; width:200px;padding:0; margin:0;}
.bottom_tool_bar div{height:35px; overflow:hidden; padding:0; margin:0;}
.bottom_tool_bar a{ float:left;width:40px;height:35px;text-indent:-9999px;display:block;margin:0;padding:0;font-size:0;background:url("nav_button.png") no-repeat scroll 0 0 transparent;}
.bottom_tool_bar a.j{background-position:0 0;}
.bottom_tool_bar a.f{background-position:-40px 0;}
.bottom_tool_bar a.d{background-position:-80px 0;}
.bottom_tool_bar a.top{background-position:-120px 0;}
.bottom_tool_bar a.hot{background-position:-160px 0;}

.bottom_tool_bar a.j:hover{background-position:0 -35px;}
.bottom_tool_bar a.f:hover{background-position:-40px -35px;}
.bottom_tool_bar a.d:hover{background-position:-80px -35px;}
.bottom_tool_bar a.top:hover{background-position:-120px -35px;}
.bottom_tool_bar a.hot:hover{background-position:-160px -35px;}

.float{width:60px; padding:10px; border:1px solid #ffecb0; background-color:#fffee0; position:absolute; right:10%; top:131px;}

.bi-loading-status-progress-bar{border:1px solid #E2E2E2;background:#FFFFFF;height:16px;width:280px;bottom:25px;left:10px;padding:1px;overflow:hidden}
.bi-loading-status-progress-bar div{background:#316AC5;overflow:hidden;height:100%;filter:Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0)}


.quick_preview{ padding:0; margin:0; display:-moz-inline-stack;display:inline-block;*display:inline;zoom:1; overflow:hidden; border:1px solid #F00;}
.quick_preview_panel{position:absolute; padding:3px; margin:0; }
	.quick_preview_panel .view_ins{background:url(tip_arrow_normal.png) #FFF no-repeat;width:8px;height:13px;float:left;margin:0 -1px 0 0;}
	.quick_preview_panel .view_main{background-color:#FFF;color:#808080;border:1px solid #dfdfdf;margin-left:7px;padding:10px;z-index:9;line-height:1.5em;}
	.quick_preview_panel .view_main .loading{width:160px;height:120px;padding:0;background:url(http://static.test.com/style/v1/images/common/popup_loading.gif) center center no-repeat;}
	.quick_preview_panel .view_main .result{padding:0; overflow:hidden;}
	
	
.rating_green{position:relative;}
.rating_green div{width:75px; height:14px; cursor:pointer; overflow:hidden;background:url(rating.png) 0 0 no-repeat; margin:0; padding:0;}
.rating_green .r0{background-position:0 0;}
.rating_green .r5{background-position:0 -14px;}
.rating_green .r10{background-position:0 -28px;}
.rating_green .r15{background-position:0 -42px;}
.rating_green .r20{background-position:0 -56px;}
.rating_green .r25{background-position:0 -70px;}
.rating_green .r30{background-position:0 -84px;}
.rating_green .r35{background-position:0 -98px;}
.rating_green .r40{background-position:0 -112px;}
.rating_green .r45{background-position:0 -126px;}
.rating_green .r50{background-position:0 -140px;}

.rating_yellow{position:relative;}
.rating_yellow div{width:75px; height:14px; cursor:pointer; overflow:hidden;background:url(rating.png) 0 -160px no-repeat; margin:0; padding:0;}
.rating_yellow .r0{background-position:0 -160px;}
.rating_yellow .r5{background-position:0 -174px;}
.rating_yellow .r10{background-position:0 -188px;}
.rating_yellow .r15{background-position:0 -202px;}
.rating_yellow .r20{background-position:0 -216px;}
.rating_yellow .r25{background-position:0 -230px;}
.rating_yellow .r30{background-position:0 -244px;}
.rating_yellow .r35{background-position:0 -258px;}
.rating_yellow .r40{background-position:0 -272px;}
.rating_yellow .r45{background-position:0 -286px;}
.rating_yellow .r50{background-position:0 -300px;}


.st_wrapper{
	position:relative;
	overflow:hidden;display:block;
    width:912px;
    height:126px;
    overflow-y:hidden;
	background-color:#FFF;
}
.st_thumbs{
    height:126px;
    margin: 0;
}
.st_thumbs img{
    float:left;
    margin:3px 3px 0px 0px;
    cursor:pointer;
	border:1px solid #CBCBCB;
	background-color: #F0F0F0;
	padding:5px;
	-moz-opacity:0.7;opacity:0.7;filter:alpha(opacity=70);
}


.slider{position:relative;margin:0;padding:0 24px;width:800px;}
.slider a{position:absolute;display:block;width:24px;height:43px;}
.slider a.s_prev{background:url(arrow-prev.png) 0 0 no-repeat; left:0; top:50%; margin-top:-22px;}
.slider a.s_next{background:url(arrow-next.png) 0 0 no-repeat; right:0; top:50%; margin-top:-22px;}
.slider .s_box{padding:5px;border:1px solid #CCC;}
.slider .s_wrapper{position:relative;overflow:hidden; height:126px;}
.slider .s_wrapper ul{position:absolute;left:0;top:0;width:9999px;}
.slider .s_wrapper ul li{float:left;}
.slider .s_wrapper ul li img{border:3px solid #CCC; margin-right:5px;}
</style>
</head>
<body>
<br /><br />
<div id="float" class="float" style="position: absolute; top: 131px;">
	我是个腼腆羞涩的浮动层<img title="含羞" src="http://web2.qq.com/style/face/6.gif">，你可以轻轻地<a href="http://www.zhangxinxu.com/php/regist.php">点击我</a>(去注册页)。
</div>



<table width="800" border="0" align="center" cellpadding="2" cellspacing="0">
  <tr>
    <td>
    <div class="pages clearfix">
        <div class="p_page clearfix">
            <a href="#">« 上一页</a>
            <a href="#">1</a>
            <a href="#">2</a>
            <strong>3</strong>
            <a href="#">4</a>
            <a href="#">5</a>
            <a class="p_break">...</a>
            <a href="#">99</a>
            <a href="#">100</a>
            <a href="#">下一页 »</a>
        </div>
        <span class="p_go"><input type="text" maxlength="3" /><button>跳转</button></span>
    </div>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
    <div>
     <ol id="steps-demo-3" class="ks-steps blue">
			<li class="ks-steps-item first done" style="z-index: 500; width: 180px;">1. 加入购物车<div class="trigon"><span class="bor"></span><span class="blo"></span></div></li>
			<li class="ks-steps-item current" style="z-index: 499; width: 180px;">2. 确认订单信息<div class="trigon"><span class="bor"></span><span class="blo"></span></div></li>
			<li class="ks-steps-item" style="z-index: 498; width: 180px;">3. 付款到支付宝<div class="trigon"><span class="bor"></span><span class="blo"></span></div></li>
			<li class="ks-steps-item last" style="z-index: 497; width: 180px;">4. 确认收货</li>
		</ol>   
    </div>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
<div class="setps">
    <ul id="markingimg">
      <li id="first" class="first actived">1. 找位置(拖拽地图)</li>
      <li id="second" class="second">2. 添加标记</li>
      <li id="third" class="third">3. 填入、保存位置</li>
    </ul>
</div>
    
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
    <div class="info_rate">
        <span style="width:20%"></span>
        <a title="完善个人资料" href="/setting">20%</a>
    </div>
    </td>
  </tr>
  <tr>
    <td><br />
        <div class="bi-loading-status-progress-bar"><div style="width: 50%;"></div></div>    
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
    <div class="quick_preview" preview-url="http://image.dhgate.com/albu_105272148_00/1.0x0.jpg">
    	<a href="#"><img src="http://image.dhgate.com/albu_105272148_00/1.thumb.jpg" /></a>
    </div>
    </td>
  </tr>
  <tr>
    <td><br/><div class="quick_preview" preview-url="http://image.dhgate.com/albu_102088299_00/1.0x0.jpg">
    	<a href="#"><img src="http://image.dhgate.com/albu_102088299_00/1.thumb.jpg" /></a>
    </div>
    </td>
  </tr>
  <tr>
    <td><br />
    <div class="rating_yellow inline">
    	<input type="hidden" />
        <div></div>
    </div>
    <div id="commet_sevice_reate_tips" class="inline" style=" vertical-align:middle;"></div>
    </td>
  </tr>
  <tr>
    <td>
    <div class="slider">
    	<a href="javascript:{};" hidefocus="true" class="s_prev"></a>
        <a href="javascript:{};" hidefocus="true" class="s_next"></a>
        <div class="s_box">
            <div class="s_wrapper">
                <ul>
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/1.jpg" ></li> 
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/2.jpg" ></li> 
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/3.jpg" ></li> 
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/4.jpg" ></li> 
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/5.jpg" ></li>
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/6.jpg" ></li>
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/7.jpg" ></li>
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/8.jpg" ></li> 
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/9.jpg" ></li> 
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/10.jpg" ></li> 
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/11.jpg" ></li> 
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/3.jpg" ></li> 
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/4.jpg" ></li> 
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/5.jpg" ></li> 
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/6.jpg" ></li>
                    <li><img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/7.jpg" ></li> 
                </ul>
            </div>
        </div>
    </div>
    <!--
<div class="st_wrapper st_thumbs_wrapper">
  <div class="st_thumbs" style="width:2928px;"> 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/1.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/2.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/3.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/4.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/5.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/6.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/7.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/8.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/9.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/10.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/11.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/3.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/4.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/5.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/6.jpg" > 
  <img src="http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/7.jpg" > 
  </div>
</div>
    -->
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td style="height:1000px;">&nbsp;</td>
  </tr>
</table>

<div id="div_floter_fix_layout" class="bottom_tool_bar">
	<div class="clearfix"><a href="javascript:{};" hidefocus="true" class="j">上</a><a href="javascript:{};" hidefocus="true" class="f">上</a><a href="javascript:{};" hidefocus="true" class="d">上</a><a href="javascript:{};" hidefocus="true" class="top">上</a><a href="javascript:{};" hidefocus="true" class="hot">上</a></div>
</div>

<script type="text/javascript" src="http://static.test.com/js/loader.js"></script>
<script type="text/javascript">
loader.load({url:'module!jquery', charset:'utf-8'}, function(){
	loader.load('module!common', function(){
		setFixed('div_floter_fix_layout');
		$("#float").smartFloat();
		$('.quick_preview').quickPreview();
	})
	.load('module!rating', function(){
		var tips = $('#commet_sevice_reate_tips');
		$('.rating_yellow').rating({half: true, onChangeRate:function(level){
			tips.html(level);
		}});
	});
	
	
	$('.st_thumbs').children('img').bind('mouseenter',function(){
		$(this).stop().animate({'opacity':'1'});
	}).bind('mouseleave',function(){
		$(this).stop().animate({'opacity':'0.7'});
	});	
	
});

</script>
</body>
</html>
